<template>
    <div class="user">
       <el-card class="left">
           <p class="tit">介绍（已升级element-plus正式版）</p>
           <div class="use">
                <div class="img_box">
                    <div>hello{{user.title}}</div>
                    <img :src="user.avatar" alt="">
                </div>
                <p class="name"><b>{{user.username}}</b></p>
                <p class="state">{{user.title}}</p>
           </div>
       </el-card>
       <el-card class="right">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="功能" name="first">功能</el-tab-pane>
                <el-tab-pane label="章节" name="second">章节</el-tab-pane>
                <el-tab-pane label="作者" name="third">作者</el-tab-pane>
            </el-tabs>
       </el-card>
    </div>
</template>
<script setup>
import {ref,reactive,onMounted} from 'vue';
import { GetUserList } from '@/utils/user.js'
import {useStore} from 'vuex'
const store = useStore();
const activeName = ref('first');
const user = ref([]);
// 获取用户信息
const getUser = async ()=>{
    console.log(store.state.token);
    let data = await GetUserList();
    // console.log(data);
    if(data.code == 200){
        user.value = data.data;
        store.commit('getMenus',data.data.permission.menus);
    }
    console.log(user.value);
}
onMounted(() => {
  getUser();  
})

</script>
<style lang="scss" scoped>
    ::v-deep .el-card__body{
        padding: 20px 0;
    }
    .user{
        height: 100%;
        display: flex;
        ::v-deep .el-card{
            box-shadow: 0 0 10px #ccc;
            border: none;
        }
        .left{  
            width: 25%;
            background: #fff;
            height: 100%;
            margin-right: 20px;
            .tit{
                // font-size: 18px;
                border-bottom: 1px solid #ccc;
                padding: 0 20px 20px 20px;
            }
            .use{
                padding: 20px;
                text-align: center;
                .img_box{
                    position: relative;
                    height: 100px;
                    div{
                        position: absolute;
                        left: 50%;
                        width: 100px;
                        height: 100px;
                        transform: translate(-50%,0);
                        border-radius: 50%;
                        padding: 25px 15px;
                        border: 6px solid rgb(228, 228, 228);
                        box-sizing: border-box;
                    }
                    img{
                        position: absolute;
                        left: 50%;
                        width: 100px;
                        border-radius: 50%;
                        transform: translate(-50%,0);
                    }
                }
                .img_box:hover{
                    img{
                        animation: rotates 0.2s linear 1 forwards;
                    }   
                }
                .name{
                    padding: 15px 0;
                }
                .state{
                    color: #777;
                    font-size: 14px;
                }
            }
        }   
        .right{
            flex: 1;
            background: #fff;
            padding: 0 20px;
        }
    }
    
    @keyframes rotates {
    0%{
            bottom: -5%;
            transform: rotate();
        }
    100%{
            left: 55%;
            bottom: -45%;
            transform: rotate(-90deg);
        }
    }
</style>